<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.1</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__ADMIN__/css/font.css">
    <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
    <script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>

    <style type="text/css">
    .layui-transfer-box{overflow-y: auto;}
    </style>
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>员工姓名
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="name" name="name" required="" lay-verify="required|name"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>员工姓名
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  联系方式
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="phone" name="phone" 
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>用户名
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="username" name="username" required="" lay-verify="required|username"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>账号（默认为姓名）
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">
                  <span class="x-red">*</span>密码
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="L_pass" name="password" required="" value="666666" lay-verify="pass"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  必须6到16个字符
              </div>
          </div>
          <!--<div class="layui-form-item">-->
          <!--    <label for="L_repass" class="layui-form-label">-->
          <!--        <span class="x-red">*</span>确认密码-->
          <!--    </label>-->
          <!--    <div class="layui-input-inline">-->
          <!--        <input type="password" id="L_repass" required="" lay-verify="repass"-->
          <!--        autocomplete="off" class="layui-input">-->
          <!--    </div>-->
          <!--</div>-->
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
                  <span class="x-red"></span>入职时间
              </label>
              <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="join_time" name="join_time" autocomplete="off" placeholder="入职时间">
              </div>
          </div>
          
          <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>权限</label>
            <div class="layui-input-inline">
              <select name="group_id" lay-verify="required"  lay-filter="group_id">
                <option value=""></option>
                {volist name="groupRes" id="group"}
                <option value="{$group.id}" {if condition="$group.id eq '2'"}selected="selected"{/if}>{$group.title}</option>
                {/volist}
              </select>
            </div>
          </div>
          <div class="layui-form-item" id="job_div">
            <label class="layui-form-label">岗位</label>
            <div class="layui-input-inline" style="width:auto">
              <select name="job_id"  lay-filter="job_id">
                <option value="">请选择</option>
                <optgroup label="销售部岗位">
                {volist name="saleDeptJob" id="job"}
                {if ($job.id>5 && session('group_id','','admin') eq 1) || $job.id<=5 }
                <option value="{$job.id}" {if condition="$admins['job_id'] eq $job['id']"}selected="selected"{/if}>{$job.name}</option>
                {/if}
                {/volist}
                </optgroup>
              </select>
            </div>
          </div>
          <div class="layui-form-item" id="parent_div">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-inline" style="width:auto">
              <select name="parent_id"  lay-filter="parent_id" lay-search>
                <option value="">无</option>
                {volist name="parentList" id="v"}
                <option value="{$v.id}" {if condition="$admins['parent_id'] eq $v['id']"}selected="selected"{/if}>{v.name}</option>
                {/volist}
              </select>
            </div>
          </div>
          
          <div class="layui-form-item" id="group-transfer-div" style="display:none;height:310px;">
              <label class="layui-form-label"><span class="x-red">*</span>小组成员</label>
              <div class="layui-input-block">
                <div id="group-transfer" class="group-transfer" ></div>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label"><span class="x-red">*</span>所属部门</label>
              <div class="layui-input-block">
                <input type="radio" name="department_id" value="0" lay-skin="primary" title="无" checked="">
                <input type="radio" name="department_id" value="1" lay-skin="primary" title="快乐星球">
                <input type="radio" name="department_id" value="2" lay-skin="primary" title="奋斗的大鲸鱼">
                <input type="radio" name="department_id" value="3" lay-skin="primary" title="勤奋的小雪鲸">
                <input type="radio" name="department_id" value="4" lay-skin="primary" title="战神">
              </div>
          </div>
          <input type="hidden" name ="status" value="1">
          <!--<div class="layui-form-item">-->
          <!--    <label class="layui-form-label"><span class="x-red">*</span>状态</label>-->
          <!--    <div class="layui-input-block">-->
          <!--      <input type="radio" name="status" value="1" lay-skin="primary" title="启用" checked="">-->
          <!--      <input type="radio" name="status" value="0" lay-skin="primary" title="禁用">-->
          <!--    </div>-->
          <!--</div>-->
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button type="button"  class="layui-btn" lay-filter="add" lay-submit="">
                  确定新增
              </button>

              <!-- <button type="button" class="layui-btn" lay-transferactive="getData">获取</button> -->
          </div>





      </form>
    </div>
    <script>
        layui.use(['form','layer','transfer','util','jquery','laydate'], function(){
          $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer
          ,transfer = layui.transfer
          ,util = layui.util
          ,laydate = layui.laydate

          laydate.render({
            elem: '#join_time'
          });
          util.event('lay-transferactive', {
            getData: function(othis){
              var getData = transfer.getData('group-transfer');
              console.log(getData);
              layer.alert(JSON.stringify(getData)); 
            }
          });
          form.on('select(group_id)', function(data){
            $('#group-transfer-div').hide();
            $('#job_div,#parent_id').hide();
            $('#job_div select,#parent_id select').val('');
            if(data.value == 5)
            {
                $('#group-transfer-div').show();
                transferInit();
                $('#job_div,#parent_id').show();
                form.render('select');
            }
            else if(data.value == 2)
            {
                $('#job_div,#parent_id').show();
                form.render('select');
            }
          });  
          //自定义验证规则
          form.verify({
            username: function(value){
              if(value.length < 2){
                return '用户名至少得2个字符';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            // ,repass: function(value){
            //     if($('#L_pass').val()!=$('#L_repass').val()){
            //         return '两次密码不一致';
            //     }
            // }
          });
          $('#name').change(function(){
              $('#username').val($('#name').val());
          })
          function transferInit()
          {
              var data = {$staffList};
              transfer.render({
                elem: '#group-transfer'
                ,title: ['可选成员', '已选组员']
                ,data: data
                ,id: 'group-transfer'
                ,showSearch: true
                //,width: 150 
                ,height: 310 
                ,text: {
                  none: '无'
                  ,searchNone: '无匹配人员'
                }
              })
          }

          //监听提交
          form.on('submit(add)', function(data){
            if(data.field.group_id==5)
            {
              var transferData = transfer.getData('group-transfer');
              transferData = JSON.stringify(transferData);
            }
            $.ajax({
                type:'POST',
                dataType:'json',
                data:{data:data.field,group_members:transferData},
                url:"{:url('Admin/add')}",
                success:function(obj){
                  layer.alert(obj.msg, {icon: obj.icon},function(){
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                    // 可以对父窗口进行刷新 
                    x_admin_father_reload();
                  });
                }
            });
            return false;
          });
          
          
        });
    </script>
  </body>

</html>